<template>
  <transition name="slide">
      <div id="wrapper" ref="scrollWrap">
        <div class="scroller" ref="scroller" >
          <ul ref="scrollList" v-if="scheduleList.length >0">
            <li tag="li" v-for="item in scheduleList" :key="item.id">
              <schedule-list-item v-on:refresh="getData" :schedule="item"></schedule-list-item>
            </li>
          </ul>
          <empty-list v-else></empty-list>
        </div>
        <transition :name="loadingPosition">
          <Loading id="loading"
                   v-show="showLoading"
                   :class='{pullDownLoading,pullUpLoading,center}'
                   ref="loading"
                   :loadingWord="loadingWord"
          ></Loading>
        </transition>
      </div>
  </transition>
</template>
<script>
  import BScroll from 'better-scroll'
  import { Indicator } from 'mint-ui';
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import ScheduleListItem from './ScheduleListItem.vue'
  import fetch from '../../utils/fetch'
  import EmptyList from '../Empty-List'
  import Loading from 'components/loading.vue'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();


  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   * @param stop 下拉刷新后回滚
   */

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:40*DEVICE_RATIO,
    stop:20*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-40*DEVICE_RATIO,
    stop:-20*DEVICE_RATIO
  }
  export default {
    data () {
      return {
        scheduleList: [],
        currentPage:1,
        pullDownLoading:false,
        pullUpLoading:false,
        showLoading:false,
        loadingWord:"正在加载",
        loadingPosition:""	,
        noMoreData:false,
        center:true
      }
    },
    components:{
      ScheduleListItem,
      EmptyList,
      Loading
    },
    methods: {
      filterDirectors(arr){
        var name="";
        return name
      },
      enable(){
        this.scroller&&this.scroller.enable()
      },
      disable(type){
        this.scroller&&this.scroller.disable()
      },
      finishPullDown(){
        this.scroller&&this.scroller.finishPullDown()
      },
      finishPullUp(){
        this.scroller&&this.scroller.finishPullUp()
      },
      refresh(){
        this.scroller&&this.scroller.refresh()
      },
      beforeFetch(type){
        this[`pull${type}Loading`]=true;
        this[`inPulling${type}`]=true;
        this.showLoading=true;
        if(type=="Down"){
          this.loadingPosition="top";
          this.loadingWord="正在下拉刷新";

          this.disable();
        }else if(type=="Up"){
          this.loadingPosition="bot";
          this.loadingWord="正在加载更多"
          console.log(type + 'cccc')
        }
      },
      afterFetch(type){
        this.enable();
        this["finishPull"+type]();
        this.showLoading=false;
        setTimeout(()=>{
          this[`pull${type}Loading`]=false;
        },300)
      },
      getData () {
        Indicator.open()
        fetch('/api/pim/schedules?page='+this.currentPage).then(response => {
          if (response.data.success) {
            if (response.data.obj.list.length > 0){
              this.scheduleList = response.data.obj.list
              this.currentPage = response.data.obj.currPage
            }
          }
        })

        setTimeout(()=>{
          Indicator.close()
        }, 300)
      },
      pullDown () {
        this.beforeFetch("Down");
        setTimeout(()=>{
          fetch('/api/pim/schedules?page='+this.currentPage).then(response => {
            if (response.data.success) {
              if (response.data.obj.list.length > 0){
                this.scheduleList = response.data.obj.list.contact(this.scheduleList)
                this.currentPage = response.data.obj.currPage
              }
            }
            this.afterFetch("Down");
          })
          this.afterFetch("Down");
        },300)
      },
      pullUp () {
        if(!this.noMoreData){
          this.beforeFetch("Up")
          setTimeout(()=>{
            fetch('/api/pim/schedules?page='+(parseInt(this.currentPage)+1)).then(response => {
              if (response.data.success) {
                if (response.data.obj.list.length > 0){
                  this.scheduleList = response.data.obj.list.contact(this.scheduleList)
                  this.currentPage = response.data.obj.currPage
                } else {
                  this.noMoreData=true
                }
                this.afterFetch("Up")
              }
            }).catch((error)=>{
              this.afterFetch("Up");
            })
          }, 300)
        }
      }
    },
    created(){
      /*进入页面先获取数据*/
      this.getData();
    },
    mounted(){
      const {scroller,scrollWrap,scrollList}=this.$refs;
      this.scroller = new BScroll(scrollWrap,{
        click:true,
        probeType:3,
        pullDownRefresh:DOWN_CONFIG,
        pullUpLoad:UP_CONFIG
      });

      /*下拉刷新*/
      this.scroller.on('pullingDown',()=> this.pullDown());
      /*上拉加载更多*/
      this.scroller.on('pullingUp',()=> this.pullUp());
    },
    watch:{
      scheduleList(){
        this.$nextTick(()=>{
          this.scroller.refresh();
        })
      }
    },
    destroyed () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .schedule-list{
    background: #F0EFF5;
    height: 100%;
  }
  #wrapper{
    position: fixed;
    top: 50px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
    background:#F0EFF5;
    z-index: 0;
    .scroller{
      position: absolute;
      width: 100%;
      &.topPadding{
        top:1rem;
      }

    }
    #loading{
      text-align: center;
      position: absolute;
      z-index: 100;
      width: 100%;
      &.center{
        left:50%;
        transform:translate(-50%,-50%);
      }
      &.pullDownLoading{
        position: absolute;
        top:10px;
      }
      &.pullUpLoading{
        position: absolute;
        bottom:0;
      }
      img{
        margin: 0 auto;
        width: 0.889rem;
        height: 0.889rem;
      }
    }
  }
  .slide-enter-active{
    transition:all 0.4s;
  }
  .slide-enter, .slide-leave-active{
    transform:translate3d(100%, 0, 0);
    transition:all 0.4s;
  }
  .top-enter-active,.bot-enter-active{
    transition:all 0.2s;
  }

  .top-enter, .top-leave-active{
    transform:translateY(-100%);
    transition:all 0.2s;
  }

  .bot-enter, .bot-leave-active{
    transform:translateY(100%);
    transition:all 0.2s;
  }
</style>
